<script setup lang="ts">
import { getOrderListAPI, putOrderAPI } from '@/api/order'
import { useAuthStore } from '@/stores/auth'
import { Message } from '@arco-design/web-vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

const { getUserInfo } = useAuthStore()

const orderList = ref<any>([])
const getOrderList = async () => {
  const res: any = await getOrderListAPI()
  orderList.value = res.reverse()
  console.log(orderList.value)
}
onMounted(() => getOrderList())

const baseURL = import.meta.env.VITE_BASE_URL

const handlePayOrder = async (id: number) => {
  const res: any = await putOrderAPI(id)
  await Promise.all([getOrderList(), getUserInfo()])

  if (!res.id) {
    Message.error('您的余额不足！')
  } else {
    Message.success('支付成功！感谢您的购买')
  }
}
</script>

<template>
  <div class="h-full w-full p-50px">
    <h2 class="text-30px color-gray-6 mb-4">
      我的订单
      <!-- <small class="text-12px color-#757575">请谨防钓鱼链接或诈骗电话 </small> -->
    </h2>
    <div class="flex justify-between">
      <a-tabs default-active-key="2" class="w-full">
        <a-tab-pane key="1" title="全部订单">
          <div v-if="orderList.length">
            <div
              v-for="(order, index) in orderList"
              :class="{ 'mt-4': index !== 0 }"
              :key="order.id"
              class="border border-solid border-gray-2"
            >
              <div class="flex items-center gap-50 bg-#f5f5f5 p-3 border-b border-b-solid border-gray-2">
                <div>下单时间：{{ new Date(order.createTime).toLocaleString().replace(/\//g, '-') }}</div>
                <div>订单编号：{{ 'tanyun' + String(order.id).padStart(2, '0') }}</div>
              </div>
              <div class="flex flex-col p-3">
                <div
                  v-for="(item, index) in JSON.parse(order.products)"
                  :key="item.id"
                  class="grid p-2 items-center text-4 goods-grid-cols border-b border-b-gray-1"
                  :class="{ 'border-b-solid': index !== JSON.parse(order.products).length - 1 }"
                >
                  <div class="flex items-center justify-between">
                    <div class="flex gap-4">
                      <div class="flex items-center gap-2">
                        <img class="w-20 h-20" :src="baseURL + item.cover" alt="" />
                      </div>
                      <div>
                        <p class="text-4">{{ item.name }}</p>
                        <p class="color-gray mt-2">数量：{{ item.goodsNum }} {{ item.model }}</p>
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div>
                        <span class="text-error">¥ {{ item.goodsNum * item.price }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="p-3 flex justify-between bg-#f5f5f5 border-t border-t-solid border-gray-2">
                <div class="flex flex-col gap-2">
                  <div>收货人：{{ order.username }}</div>
                  <div>联系电话：{{ order.phone }}</div>
                  <div>收货地址：{{ order.address }}</div>
                </div>

                <div class="flex flex-col gap-2" v-if="order.status == 0">
                  <div>
                    需要支付： <span class="text-error">¥ {{ order.total }}</span>
                  </div>
                  <div>
                    <a-button @click="handlePayOrder(order.id)" type="primary" status="success">立即支付</a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无订单" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="待支付">
          <div v-if="orderList.filter((o: any) => o.status == 0).length">
            <div
              v-for="(order, index) in orderList.filter((o: any) => o.status == 0)"
              :class="{ 'mt-4': index !== 0 }"
              :key="order.id"
              class="border border-solid border-gray-2"
            >
              <div class="flex items-center gap-50 bg-#f5f5f5 p-3 border-b border-b-solid border-gray-2">
                <div>下单时间：{{ new Date(order.createTime).toLocaleString().replace(/\//g, '-') }}</div>
                <div>订单编号：{{ 'tanyun' + String(order.id).padStart(2, '0') }}</div>
              </div>
              <div class="flex flex-col p-3">
                <div
                  v-for="(item, index) in JSON.parse(order.products)"
                  :key="item.id"
                  class="grid p-2 items-center text-4 goods-grid-cols border-b border-b-gray-1"
                  :class="{ 'border-b-solid': index !== JSON.parse(order.products).length - 1 }"
                >
                  <div class="flex items-center justify-between">
                    <div class="flex gap-4">
                      <div class="flex items-center gap-2">
                        <img class="w-20 h-20" :src="baseURL + item.cover" alt="" />
                      </div>
                      <div>
                        <p class="text-4">{{ item.name }}</p>
                        <p class="color-gray mt-2">数量：{{ item.goodsNum }} {{ item.model }}</p>
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div>
                        <span class="text-error">¥ {{ item.goodsNum * item.price }}</span>
                      </div>
                      <!-- <a-button type="primary" status="success">支付</a-button> -->
                    </div>
                  </div>
                </div>
              </div>
              <div class="p-3 flex justify-between bg-#f5f5f5 border-t border-t-solid border-gray-2">
                <div class="flex flex-col gap-2">
                  <div>收货人：{{ order.username }}</div>
                  <div>联系电话：{{ order.phone }}</div>
                  <div>收货地址：{{ order.address }}</div>
                </div>

                <div class="flex flex-col gap-2">
                  <div>
                    需要支付： <span class="text-error">¥ {{ order.total }}</span>
                  </div>
                  <div>
                    <a-button @click="handlePayOrder(order.id)" type="primary" status="success">立即支付</a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无待支付订单" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="已支付">
          <div v-if="orderList.filter((o: any) => o.status == 1).length">
            <div
              v-for="(order, index) in orderList.filter((o: any) => o.status == 1)"
              :class="{ 'mt-4': index !== 0 }"
              :key="order.id"
              class="border border-solid border-gray-2"
            >
              <div class="flex items-center gap-50 bg-#f5f5f5 p-3 border-b border-b-solid border-gray-2">
                <div>下单时间：{{ new Date(order.createTime).toLocaleString().replace(/\//g, '-') }}</div>
                <div>订单编号：{{ 'tanyun' + String(order.id).padStart(2, '0') }}</div>
              </div>
              <div class="flex flex-col p-3">
                <div
                  v-for="(item, index) in JSON.parse(order.products)"
                  :key="item.id"
                  class="grid p-2 items-center text-4 goods-grid-cols border-b border-b-gray-1"
                  :class="{ 'border-b-solid': index !== JSON.parse(order.products).length - 1 }"
                >
                  <div class="flex items-center justify-between">
                    <div class="flex gap-4">
                      <div class="flex items-center gap-2">
                        <img class="w-20 h-20" :src="baseURL + item.cover" alt="" />
                      </div>
                      <div>
                        <p class="text-4">{{ item.name }}</p>
                        <p class="color-gray mt-2">数量：{{ item.goodsNum }} {{ item.model }}</p>
                      </div>
                    </div>
                    <div class="flex items-center gap-4">
                      <div>
                        <span class="text-error">¥ {{ item.goodsNum * item.price }}</span>
                      </div>
                      <!-- <a-button type="primary" status="success">支付</a-button> -->
                    </div>
                  </div>
                </div>
              </div>
              <div class="p-3 flex justify-between bg-#f5f5f5 border-t border-t-solid border-gray-2">
                <div class="flex flex-col gap-2">
                  <div>收货人：{{ order.username }}</div>
                  <div>联系电话：{{ order.phone }}</div>
                  <div>收货地址：{{ order.address }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无已支付订单" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
:deep(.arco-empty-description) {
  font-size: 20px;
}

:deep(.arco-empty-image) {
  font-size: 80px;
}

:deep(.arco-tabs-tab-active) {
  color: #76a5af;
}

:deep(.arco-tabs-nav-ink) {
  background-color: #76a5af;
}
</style>
